<template>
	<div class="ts_box">
		<div class="bg">
			<img :src="img_url" width="100%" height="100%" alt="" />
		</div>
		<div class="client-app" style="padding-top: 32px;">
			<transition name="el-zoom-in-top">
				<el-row class="image-line" v-show="!inputStr.length > 0">
					<img src="@clientAssets/librarySearch/logo.png" />
				</el-row>
			</transition>
			<!-- <el-row>
				<el-col :span="12" :offset="6">
					<el-radio-group v-model="searchType">
						<el-radio-button label="1">全部</el-radio-button>
						<el-radio-button label="2">图书</el-radio-button>
						<el-radio-button label="3">期刊</el-radio-button>
					</el-radio-group>
				</el-col>
			</el-row> -->
			<el-row style="margin-top: 10px;">
				<el-col :span="12" :offset="6">
					<!-- <el-autocomplete style="width: 80%;height: 50px;" v-model="inputStr"
						:fetch-suggestions="querySearchAsync" placeholder="请输入内容" :popper-append-to-body="false" 
						placement="bottom-start" @select="handleSelect"></el-autocomplete> -->

					<el-input style="width: 80%;height: 50px;" v-model="inputStr" placeholder="请输入内容" class="w_ipt">
					</el-input>
					<el-button icon="el-icon-search" type="primary" class="search-btn" @click='btn'>搜索</el-button>
				</el-col>
			</el-row>
			<el-row :style="{ marginTop: '10px' }">
				<el-col :span="12" :offset="6">
					<el-radio-group v-model="radio">
						<el-radio style="margin-right: 14px;" :label="(index + 1).toString()"
							v-for="(item, index) in radioArr" :key="'radio' + item + index">{{ item.title }}
						</el-radio>
					</el-radio-group>
				</el-col>
			</el-row>
			<el-row class="table-contain">
				<transition name="el-zoom-in-bottom">
					<SearchTable :searchText="inputStr" :list='list' :num='num' :obj='obj' @pageSize='pageSize'>
					</SearchTable>
				</transition>
			</el-row>
		</div>
	</div>

</template>

<script>
	import {
		radioArr
	} from './config'
	import SearchTable from './components/SearchTable'
	import {
		book,
		book_f
	} from "@/api/public/index.js"
	import {
		getReceptionSkin
	} from '@/api/system/config'
	export default {
		name: 'index',
		components: {
			SearchTable
		},
		data() {
			return {
				searchType: '1',
				inputStr: '',
				radio: '1',
				radioArr,
				name: "",
				page: 1,
				list: [], //列表
				num: 1, //总数
				obj: {},
				pageSize1: 10,
				img_url: "",
			}
		},
		mounted() {
			getReceptionSkin().then(res => {
				if (res.code == 200) {
					this.img_url = res.data.skinUrl
					console.log(this.img_url)
				}
			})
		},
		methods: {
			handleSelect(item) {
				// this.inputStr = item
			},
			querySearchAsync(queryString, cb) {
				console.log(queryString)
				this.name = queryString
				//  this.obj = {
				// 	name: this.name,
				// 	type: radioArr[this.radio - 1].code,
				// 	pageNum1: this.page,
				// 	pageSize1: 10,
				// }

				//	this.hq(this.name)
				// 加载数据
			},
			hq(queryString) {
				// book_f({
				//  name:queryString,
				//  pageNum1:this.page,
				//  pageSize1:10,
				//  type:radioArr[this.radio-1].code

				// }).then(res=>{
				//  if(res.code==200){
				//   this.list=res.rows
				//   this.num=res.total

				//  }
				// })
			},
			btn() {
				this.obj = {
					//name: this.name,
					name: this.inputStr,
					type: radioArr[this.radio - 1].code,
					pageNum1: this.page,
					pageSize1: this.pageSize1,
					status: 1
				}
			},
			pageSize(e) {
				this.pageSize1 = e
			}
		}
	}
</script>

<style scoped>
	.image-line {
		margin-top: 46px;
		text-align: center;

	}

	.image-line img {
		width: 178px;
	}

	.search-btn {
		width: 18%;
		height: 50px;
		margin-left: 2%;
		font-size: 18px;


	}

	.search-btn:hover {
		color: #fff !important;
	}

	.table-contain {
		min-height: 399px;
		padding: 0px 24px;
		margin-top: 20px;
	}

	.bg {
		width: 100%;
		height: 100%;
		/**宽高100%是为了图片铺满屏幕 */
		z-index: -1;
		position: absolute;
	}
	.ts_box{opacity: 0.8;}
	.client-app{background: #fff;opacity: 0.8;}
	
	
</style>
